<template>
	<view class="visitor-container">
		<c-layout>
			<c-navigation-bar slot="head" :title="this.$t('system.visitor')"></c-navigation-bar>
			<view class="visitor-main">
				<scroll-list ref="anchorList" :option="queryParams" @refresh="refresh" @load="loadMore">
					<view class="list" v-for="item in anchor.list" @click="goAnchorHomepage(item.id)" :key="item.id">
						<view class="left">
							<u-image size="160" width="160rpx" height="160rpx" :src="$u.file.getMedieUrl(item.userAvatar)"  shape="circle"></u-image>
							<view class="info">
								<text class="uaer-name">{{ item.userName }}</text>
								<text class="des">{{ item.personalIntroduction }}</text>
							</view>
						</view>
						{{publicJS.timeZoneSwitching(item.createTime)}}
					</view>
				</scroll-list>
			</view>
		</c-layout>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 主播相关列表及传递数据
				anchor: {
					data: {
						pageSize: 10,
						pageNum: 1,
					},
					list: [],
				}
			}
		},
		onShow() {
			this.getAnchorBrowseAjax()
		},
		computed: {
			queryParams() {
				return {
					pageNum: 1,
					size: this.anchor.data.pageSize,
					offsetBottom: 10,
				
					contentHeight: 0,
					safeArea: true,
					auto: false,
				emptyText: this.$t('system.NoRecord'),
				noMoreText: this.$t('system.NoFurtherDataAvailable'),
					showPullDown: false,
					loadDisabled: false
				}
			},
		},
		methods: {
			// 获取主播浏览记录
			getAnchorBrowseAjax(add) {
				this.$u.post('/app/anchorAccessRecord/getVisitor', this.anchor.data).then(res => {
					this.anchor.list = [...this.anchor.list, ...res.data.records]
					if (add) {
						this.$refs.anchorList.loadSuccess({
							list: this.anchor.list,
							total: res.data.current === res.data.pages ? 0 : 100000
						})
					}else{
						this.$refs.anchorList.refreshSuccess({
							list: this.anchor.list,
							total: res.data.current === res.data.pages ? 0 : 100000
						})
					}

				})
			},
			// 刷新
			refresh(paging) {
				this.anchor.data.pageNum = 1
				this.anchor.list = []
				this.getAnchorBrowseAjax(false)
			},
			loadMore() {
				this.anchor.data.pageNum += 1
				this.getAnchorBrowseAjax(true)
			},
		}
	}
</script>

<style scoped lang="scss">
	.visitor-main {
		padding: 0 40rpx;

		.list {
			display: flex;
			width: 100%;
			justify-content: space-between;
			font-size: 22rpx;
			color: #91909a;
			margin-bottom: 50rpx;
			position: relative;
				align-items: center;
			.left {
				display: flex;
				width: calc(100% - 240rpx);
				align-items: center;
				.u-avatar {
					border-radius: 50% !important;
					overflow: hidden;
					padding: 4rpx;
					border: 4rpx solid #30A6E9;

					.u-avatar__img {
						border-radius: 50% !important;
					}
				}

				.info {
					margin-left: 38rpx;
					width: calc(100% - 200rpx);

					.uaer-name {
						color: #1b1d29;
						font-size: 26rpx;
						line-height: 40rpx;
					}

					.des {
						margin-top: 10rpx;
						display: -webkit-box;
						display: -moz-box;
						white-space: pre-wrap;
						word-wrap: break-word;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						/* 实现限制文字显示多少行,也就是说要多少行是出现省略号,我这里设置三行就让文本出现省略号 */
						-webkit-line-clamp: 2;
					}
				}
			}

			.flex-bottom {
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}
</style>